<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>云端课堂</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bulma/0.9.3/css/bulma.min.css"
    integrity="sha384-IJLmUY0f1ePPX6uSCJ9Bxik64/meJmjSYD7dHaJqTXXEBE4y+Oe9P2KBZa/z7p0Q" crossorigin="anonymous" />
  <style>
    * {
      user-select: none;
    }

    .card {
      box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 20%),
        0 0 0 1px rgb(10 10 10 / 10%);
    }

    main {
      flex-wrap: wrap;
      justify-content: center;
    }

    @media screen and (min-width: 1408px) {
      main {
        flex-wrap: nowrap;
      }

      #donate {
        max-width: 350px;
      }
    }
  </style>
</head>

<body>
  <nav class="navbar has-shadow is-spaced is-flex" aria-label="导航栏">
    <div class="navbar-brand">
      <a class="navbar-item" href="./">
        <div class="image">
          <img style="width: initial" class="is-rounded" src="https://mapp.alicdn.com/1620574555635zEvanSkxkmWJVHj.png"
            alt="云端课堂" />
        </div>
        <span id="title" class="title is-4 mx-4">云端课堂</span>
      </a>
    </div>
    <div
      class="navbar-menu is-active is-flex-grow-1 is-flex is-justify-content-flex-end is-shadowless">
      <div class="navbar-end">
        <div class="navbar-item is-flex">
          <div id="user_name" class="navbar-item"></div>
          <a href="./login.html" class="button">重新登录</a>
        </div>
      </div>
    </div>
  </nav>
  <main class="is-flex py-5 px-4">
    <div id="content" class="container is-max-desktop">
      <div id="preview" class="columns is-multiline">
        <noscript>请启用 JavaScript 以浏览本页面</noscript>
      </div>
    </div>
    <div id="donate" class="container is-max-desktop m-4">
      <div class="card">
        <header class="card-header">
          <p class="card-header-title">支持</p>
          <button class="card-header-icon" aria-label="more options" onclick="donate.hidden = true">
            <span class="icon">
              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
                  fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
              </svg>
            </span>
          </button>
        </header>
        <div class="card-content">
          服务器、CDN流量并不便宜，如果我帮到了你，请捐助我！
          <div class="content is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-center">
            <img class="image" width="350" src="./zfb.png" alt="支付宝" />
            <img class="image" width="350" src="./wx.png" alt="微信" />
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="footer">
    <div class="content has-text-centered">
      @2021 阳泉一中2015
      <br />
      如有问题请联系：<a href="mailto:timpaik@163.com">timpaik@163.com</a>
      <br />
      <p class="hitokoto"></p>
      <script async src="https://v1.hitokoto.cn/?encode=js&charset=utf-8"></script>
    </div>
  </footer>
  <script>
    "use strict";
    let data = JSON.parse(localStorage.getItem("data"));
    if (data == null) {
      window.location.href = "./login.html";
    }
    const updateData = () => {
      let url = localStorage.getItem("dataurl");
      fetch(url)
        .then((response) => response.text())
        .then((data) => {
          localStorage.setItem("data", data);
          localStorage.setItem("lastUpdate", Date.now());
        });
    }
    if (Date.now() - localStorage.getItem("lastUpdate") > 1800000) {
      updateData();
    }
    user_name.innerText = data.user.name ? "欢迎，" + data.user.name : "";
    const template = `
      <div class="column is-half">
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">{{TITLE}}</p>
          </header>
          <div class="card-image">
            <figure class="image">
              <img src="{{PREVIEW}}" alt="视频预览" />
            </figure>
          </div>
          <footer class="card-footer">
            <a href="./history.html?class={{CLASS_NAME}}" class="card-footer-item">历史</a>
            <a href="./play.html?class={{CLASS_NAME}}" class="card-footer-item">最新</a>
          </footer>
        </div>
      </div>`;
    const fillPage = (data) => {
      eval(data.extend);
      for (var data of data.classes) {
        var html = template
          .replace("{{TITLE}}", data.prefix)
          .replace("{{PREVIEW}}", data.preview)
          .replace("{{CLASS_NAME}}", data.classname)
          .replace("{{CLASS_NAME}}", data.classname);
        preview.insertAdjacentHTML("beforeend", html);
      }
    };
    fillPage(data);
  </script>
</body>

</html>